﻿<Page
    x:Class="App4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="HubStyle1" TargetType="Hub">
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="Padding" Value="40,60,40,0"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Hub">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="OrientationStates">
                                    <VisualState x:Name="Horizontal"/>
                                    <VisualState x:Name="Vertical">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="HorizontalScrollMode" Storyboard.TargetName="ScrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Disabled"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="HorizontalScrollBarVisibility" Storyboard.TargetName="ScrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Disabled"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="VerticalScrollMode" Storyboard.TargetName="ScrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="VerticalScrollBarVisibility" Storyboard.TargetName="ScrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Auto"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ScrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ScrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="ScrollViewer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0,20,0,0"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <ScrollViewer x:Name="ScrollViewer" HorizontalScrollMode="Auto" HorizontalSnapPointsAlignment="Near" HorizontalSnapPointsType="Optional" HorizontalScrollBarVisibility="Auto" Grid.RowSpan="2" VerticalSnapPointsType="Optional" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalSnapPointsAlignment="Near" ZoomMode="Disabled">
                                    <ItemsStackPanel x:Name="Panel" CacheLength="20" Orientation="{TemplateBinding Orientation}"/>
                                </ScrollViewer>
                                <Border x:Name="HeaderHost" Padding="{TemplateBinding Padding}" Grid.Row="0">
                                    <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontWeight="{ThemeResource HubHeaderThemeFontWeight}" FontSize="{ThemeResource HubHeaderThemeFontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" OpticalMarginAlignment="TrimSideBearings" TextLineBounds="Tight"/>
                                </Border>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="AppBarButton">
                <AppBarButton.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Click="MenuFlyoutItem_Click" Tag="0" Text="Goto One"/>
                        <MenuFlyoutItem Click="MenuFlyoutItem_Click" Tag="1" Text="Goto Two"/>
                        <MenuFlyoutItem Click="MenuFlyoutItem_Click" Tag="2" Text="Goto Three"/>
                        <MenuFlyoutItem Click="MenuFlyoutItem_Click" Tag="3" Text="Goto Four"/>
                        <MenuFlyoutItem Click="MenuFlyoutItem_Click" Tag="4" Text="Goto Five"/>
                        <MenuFlyoutItem Click="MenuFlyoutItem_Click" Tag="5" Text="Goto Six"/>
                        <MenuFlyoutItem Click="MenuFlyoutItem_Click" Tag="6" Text="Goto Seven"/>
                    </MenuFlyout>
                </AppBarButton.Flyout>
                <AppBarButton.Icon>
                    <SymbolIcon/>
                </AppBarButton.Icon>
            </AppBarButton>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid>
        <Hub x:Name="MyHub">
            <HubSection Background="Red" Width="500" Header="One" />
            <HubSection Background="Blue" Width="500" Header="Two" />
            <HubSection Background="Green" Width="500" Header="Three" />
            <HubSection Background="Yellow" Width="500" Header="Four" />
            <HubSection Background="Orange" Width="500" Header="Five" />
            <HubSection Background="Navy" Width="500" Header="Six" />
            <HubSection Background="DarkGreen" Width="500" Header="Seven" />
        </Hub>
    </Grid>
</Page>
